<template>
  <div class="page-container" v-if="isShowEditFence">
    <fence-module :form="form" :id="id" @cancelFenceFn="editFence" @submitBtn="submitBtn" />
  </div>
  <div class="page-container" v-else>
    <fence-header :loading="loading" :id="id" @editFence="editFence" />
  </div>
</template>

<script setup name="FenceForm">
  import { ref, onMounted, reactive, provide } from 'vue'
  import { useRoute } from 'vue-router'
  import { getDetail } from '@/api/business/fence'
  import fenceHeader from '../components/fence-header.vue'
  import fenceModule from '../components/fence-module.vue'

  const route = useRoute()
  const loading = ref(false)
  const isShowEditFence = ref(false) // 点击围栏
  const id = ref(route.params?.id || null)
  const form = reactive({
    needWarning: 1,
    rentWarningMinus: 2,
    otherWarningMinus: 10,
    rule: 2,
    status: 1,
  })
  provide('form', form)

  // 获取编辑数据
  const getFenceDetail = (id) => {
    loading.value = true
    getDetail({ id }).then(({ result }) => {
      loading.value = false
      result.selectAllCarFlag = +result.selectAllCarFlag === 1
      result.siteList = result.siteList && result.siteList.map((item) => item.toString())

      if (result.carInfoList && result.carInfoList.length > 0) {
        result.carInfoList = result.carInfoList.map((item) => item.toString())
      } else if (!result.selectAllCarFlag && result.carInfoList.length === 0) {
        result.carInfoList = []
      } else {
        result.carInfoList = 'all'
      }
      // result.carInfoList = result.carInfoList && result.carInfoList.length > 0 ? result.carInfoList.map((item) => item.toString()) : 'all'

      Object.assign(form, result)
    })
  }

  //编辑围栏
  const editFence = () => {
    isShowEditFence.value = !isShowEditFence.value
  }

  // 围栏
  const submitBtn = (val) => {
    isShowEditFence.value = !isShowEditFence.value
    form.electricFenceList = [...val]
  }

  onMounted(() => {
    // 编辑
    if (id.value) {
      getFenceDetail(id.value)
    }
  })
</script>
<style lang="less" scoped></style>
